<script setup lang="ts">
import { ElPagination } from 'element-plus'
import { toRefs } from 'vue'

const props = withDefaults(defineProps<{
    page: any
    size: any
    total: any
}>(), {
    page: 1,
    size: 10,
    total: 10,
})
const emits = defineEmits(['hanldeChange'])
console.log(emits)

const { total } = toRefs(props)
// console.log(data.value);
function handleSizeChange(val: any) {
    emits('hanldeChange', { type: 'handleSizeChange', val })
}
function handleCurrentChange(val: any) {
    emits('hanldeChange', { type: 'handleCurrentChange', val })
}
</script>

<template>
    <div class="pagination">
        <ElPagination background
                      small
                      layout="total, sizes, prev, pager, next, jumper"
                      :total="total"
                      @size-change="handleSizeChange"
                      @current-change="handleCurrentChange"
        />
    </div>
</template>

<style lang="scss" scoped>
 .pagination {
    margin-top: 20px;
}
</style>
